<template>
  <div :class="styles.pageContainer">
    <!-- 服务顶部 -->
    <div :class="styles.serviceTop">
      <LeftOutlined @click="handleRouteSkip('/')" :style="{ fontSize: '20px',color:'#343434' }" />

      <div :class="styles.tabs">
        <img src="../assets/img/service/serviceTop.jpg" alt="" />
      </div>
    </div>

    <!-- 服务内容 -->
    <div :class="styles.serviceContent">
      <div :class="styles.leftBox">
        <div :class="styles.serviceItemActive">查询服务</div>

        <div :class="styles.tabs_btn">
          <div :class="styles.serviceItem">充值交费</div>
          <div :class="styles.serviceItem">号卡服务</div>
          <div :class="styles.serviceItem">亲友服务</div>
          <div :class="styles.serviceItem">宽带服务</div>
          <div :class="styles.serviceItem">客服咨询</div>
        </div>
      </div>
      <div :class="styles.rightBox">
        <div :class="styles.rightTop">
          <img src="../assets/img/service/rightTop.jpg" alt="" srcset="" />
        </div>
        <div :class="styles.rightBottom">
          <div :class="styles.fistLineIcon">
            <span :class="styles.icon">
              <img src="../assets/img/service/hf.jpg" alt="" srcset="" />
            </span>
            <span :class="styles.icon" @click="handleRouteSkip('/bill')">
              <img src="../assets/img/service/zd.jpg" alt="" srcset="" />
            </span>
            <span :class="styles.icon">
              <img src="../assets/img/service/cx.jpg" alt="" srcset="" />
            </span>
          </div>
          <div :class="styles.resetLineIcon">
            <span :class="styles.icon">
              <img src="../assets/img/service/btm1.jpg" alt="" srcset="" />
            </span>
            <span :class="styles.icon">
              <img src="../assets/img/service/btm2.jpg" alt="" srcset="" />
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Ai -->
     <div :class="styles.aiBox">
      <div :class="styles.aiContainer">
        <img src="../assets/img/service/ai.jpg" alt="" srcset="" />
      </div>
     </div>
  </div>
</template>

<script setup>
import styles from "./Services.module.less";
import { LeftOutlined } from "@ant-design/icons-vue";
import { useRouter } from 'vue-router';
const router = useRouter();
const handleRouteSkip = (path) => {
  router.push(path)

}
</script>

